<template>
  <div class='editAgent'>
    <el-dialog title="变更代理人" center :visible.sync="isShow" append-to-body @open='open'>
				<el-form :model="form" :rules="rulesAgent" ref="ruleFormAgent" label-width="140px">
					<el-form-item label="选择代理人：" prop="name">
						<!-- <el-autocomplete v-model="form.name" :fetch-suggestions="querySearch" :trigger-on-focus="true" placeholder="选择代理人"
						@select="handleSelect"></el-autocomplete> -->
            <el-select v-model="form.name"  filterable placeholder="请选择代理人">
              <el-option
                v-for="(item, index) in agentData"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
					</el-form-item>
					<el-form-item label="修改代理人原因" prop="remarks">
						<el-input type="textarea" v-model.trim="form.remarks" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="handleCloseAgent" v-no-more-click:3000>取 消</el-button>
					<el-button type="primary" @click="submitForm('ruleFormAgent')" v-no-more-click:3000>确 定</el-button>
				</div>
			</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: "",
        remarks: ''
      },
      rulesAgent: {
        name: [{
          required: true,
          message: "请选择代理人",
          trigger: "change"
        }],
        remarks: [{
          required: true,
          message: "请填写修改原因",
          trigger: "blur"
        }]
      },
      agentData: [],
      restaurants: [],
      isShow: false,
      formAgent: {}
    }
  },
  components: {
  },
  created () {

  },
  methods: {
    show (data) {
      this.id = data.id
      this.getAgent()
      this.isShow = true
    },
    open () {

    },
    getAgent () {
      this.$axios.get('api/user/agent').then(  res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.agentData = res.data.data.map( v => {
            v.label = v.name
            v.value = v.id
            return v
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
					if (valid) {
            this.submitPost()
					} else {
						return false;
					}
				})
    },
    submitPost () {
      let params = {
        agent_id: this.form.name,
        reason: this.form.remarks
      }
      let userId = this.$store.state.user.id
      this.$axios.put(`api/order/${this.id}/change/agent/${userId}`, params).then( res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '修改代理人成功'
          })
          this.$emit('refresh')
          this.isShow = false
          this.handleCloseAgent()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    },
    updateValue (value) {
      this.form.name = value
    },
    handleCloseAgent () {
      this.form = {
        name: "",
        remarks: ''
      }
      // this.resetForm("ruleFormAgent");
      this.$refs['ruleFormAgent'].resetFields()
      this.isShow = false;
    },
    getAllAgent() {
      getAgent(this.$axios)
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            for (let key in arr) {
              //element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
              arr[key].value = arr[key].name;
            }
            this.restaurants = arr;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });
    },
  }
}
</script>

<style lang='less' type='text/css'>
  .el-autocomplete{
      width: 100% ;
    }
  .el-select {
    width: 100% ;
  }
</style>
